<template>
    <div class="recommend-item">
        <img :src="item.hd_thumb_url" alt="" width="100%" v-if="item.hd_thumb_url">
        <h4 class="item-title">{{item.short_name}}</h4>
        <div class="item-bottom">
            <span class="item-price">¥{{item.price/100}}</span>
            <span class="sales-tip">¥{{item.sales_tip}}</span>
            <button class="item-btn">找相关</button>
        </div>
    </div>       
</template>

<script>
export default {
    name:'shoplist',
    props:{
        item:Object
    }
    
}
</script>

<style  scoped lang="stylus" ref="stylesheet/stylus">
    .recommend-item{
        width 49.5%
        background #fff
        padding-bottom 15px
        margin-bottom 15px
    }

    .recommend-item:nth-child(2n-1){
        margin-right 1%
    }

    .item-title{
        line-height 20px
        font-size 13px
        font-weight lighter
        height 20px
        overflow hidden
        margin 5px 0
        padding 0 5px
    }

    .item-bottom{
        display flex
        flex-direction row
        align-items center
        padding 0 6px
    }

    .item-price{
        flex:2
        font-weight bold
        color red
        font-size 12px
    }

    .sales-tip{
        flex:4
        font-size 10px
        color #666
    }

    .item-btn{
        flex:2
        border:1px solid orange
        height 26px
        border-redius 5px
        background-color transparent
        color red
        width 80%
    }
    
</style>
